<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>css三大特性</title>
    <style>
        /* css三大特性
                层叠性  
                  给相同选择器(div.a和.a不是同一个)设置相同样式时 样式会发生覆盖 层叠性解决冲突问题
                    就近原则 :那个样式离结构近 就执行那个样式
                继承性  
                  子标签继承父标签的某些样式 如文本颜色 字号(text- font- line-)  不是所有样式
                  行高的继承性   行高可以不带单位
                    带单位 实际大小
                    不带单位 当前文字大小的倍数
                优先级   同一个标签多个选择器 就会有优先级 范围越小权重越大
                    选择器相同时 则执行层叠性
                    选择器不同则根据选择器权重执行  不是二进制不会有进位
                        继承或* 0,0,0,0
                        元素选择器(标签) 0,0,0,1
                        类选择器 伪类选择器 0,0,1,0
                        id选择器 0,1,0,0
                        行内样式style="" 1,0,0,0
                        !important  属性!important 无穷大
                        a链接 浏览器默认添加的一个样式 所以继承性会失效
                权重叠加  复合选择器有权重叠加需要计算权重
                        当是复合选择器时 忽略继承
                        ul li {
                                    color: green;
                                }
                        a:hover 类+伪类
                        都是基础选择器时直接比较
                        都是复合选择器时比较 "权重的叠加" 注意是否是继承
                        复合选择器和基础选择器时也是比较 "权重的叠加"
                              */
         /* div.a {
            color: rebeccapurple;
         }
         .a {
            color: green;
         } */
        /* div.b {
             color: green;
           font: 12px/2 '微软雅黑'  
        } */
        /* #ee {
            color: yellowgreen;
        }
        .cc {
            color: green!important;
        }

        div {
            color: pink;
        } */
       li {
        /* 0 0 0 1 */
         color: rebeccapurple;
       }
       ul li { 
        /* 权重叠加 0,0,0,2
            0,0,0,1 + 0,0,0,1 = 0,0,0,2 >0,0,0,1
         */
        color: green;
       }
      .nav li {
        /* 
            0,0,1,0 + 0,0,0,1 = 0,0,1,1 > 0,0,1,0
        */
        color: blue;
      }
        .aaa {
            /* 0,0,1,0 > 0,0,0,2 */
            color: gray;
        }
    </style>
</head>

<body>
    <div id="root">
        <h1>权重叠加</h1>

        <ul class="nav">
            <li class="aaa" >这是</li>
            <li>范围</li>
            <li>与时尚</li>
        </ul>

        <h1>权重叠加</h1>

        <!-- <div class="a">层叠</div> -->
        <!-- <div>
            <p>{{word}}</p>
        </div>
        <h1>行高的继承性</h1>
        <div class="b">
            <p>{{word}}</p>
            <div>你好世界</div>
        </div>
        <h1>优先级</h1>
        <div class="cc" id="ee" style="color: purple;">
            {{word}}
        </div> -->
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
                word:Mock.mock('@cword(20)')
            }
        },
    })
</script>

</html>